<template>
    <div class="image-list">
        <div class="action-btn">
            <el-radio-group v-model="collect" size="mini" @change="loadImages(1)">
                <el-radio-button :label="false">全部</el-radio-button>
                <el-radio-button :label="true">收藏</el-radio-button>
            </el-radio-group>
            <el-button v-if="isShowAdd" size="mini" type="success" @click="dialogUploadVisible = true">上传素材</el-button>
        </div>
        <!-- 素材列表 -->
        <el-row :gutter="10">
            <el-col class="image-item" :xs="12" :sm="6" :md="4" :lg="4" v-for="(img,index) in images" :key="index" @click.native="selected = index">
                <el-image style=" height: 200px" :src="img.url" fit="cover"></el-image>
                <div class="selected" v-if=" isShowSelected && selected === index"></div>
                <div class="image-action" v-if="isShowAction">
                    <!-- <i @click="onCollect(img)" :class="{'el-icon-star-on':img.is_collected,'el-icon-star-off':!img.is_collected}"></i> -->
                    <el-button v-loading="img.loading" @click="onCollect(img)" type="warning" :icon="img.is_collected ? 'el-icon-star-on' : 'el-icon-star-off'" circle size="small"></el-button>
                    <el-button v-loading="img.loading" @click="onDelete(img)" type="danger" icon="el-icon-delete" circle size="small"></el-button>
                </div>
            </el-col>
        </el-row>
        <!-- 素材分页 -->
        <!-- 
                分页数据改变以后，页码不会变化
                它需要单独处理
                 -->
        <el-pagination background layout="prev, pager, next" :total="totalCount" @current-change="onPageChange" :page-size="pageSize" :current-page.sync="page">
        </el-pagination>
        <el-dialog title="上传素材" :visible.sync="dialogUploadVisible" :append-to-body="true">
            <el-upload :show-file-list="false" class="upload-demo" drag action="http://api-toutiao-web.itheima.net//mp/v1_0/user/images" multiple :headers="uploadHeaders" name="image" :on-success="onUploadSuccess">
                <i class="el-icon-upload"></i>
                <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
            </el-upload>
        </el-dialog>
    </div>
</template>
<script>
import { getImage, collectImage, deleteImage } from "@/api/image";
export default {
    props: {
        // 是否显示上传素材
        isShowAdd: {
            type: Boolean,
            default:true//默认值
        },
        // 是否显示删除,收藏
        isShowAction:{
            type:Boolean,
            default:true
        },
        isShowSelected:{
            type:Boolean,
            default:false
        }
    },
    name: "ImageList",
    data() {
        const user = JSON.parse(localStorage.getItem("user"));
        return {
            collect: false, //默认查询全部
            images: [], //图片素材列表
            dialogUploadVisible: false,
            uploadHeaders: {
                Authorization: `Bearer ${user.token}`,
            },
            totalCount: 0, //总数据条数
            pageSize: 10, //每页大小
            page: 1, //当前页码
            selected:null//选中发索引
        };
    },
    created() {
        this.loadImages(1);
    },
    methods: {
        loadImages(page = 1) {
            // 重置高亮页码， 防止数据页码不对应
            this.page = page;
            getImage({
                collect: this.collect,
                page,
                per_page: this.pageSize,
            }).then((res) => {
                const results = res.data.data.results;
                results.forEach((img) => {
                    // img 对象本来没有 loading 数据
                    img.loading = false;
                });
                this.images = results;
                this.totalCount = res.data.data.total_count;
            });
        },
        onCollectChange() {
            this.loadImages(1);
        },
        onUploadSuccess() {
            //关闭对话框
            this.dialogUploadVisible = false;

            //更新列表素材
            this.loadImages(this.page);

            this.$message({
                type: "success",
                message: "上传成功",
            });
        },
        onPageChange(page) {
            this.loadImages(page);
        },
        onCollect(img) {
            // 展示loading
            img.loading = true;
            // 已收藏， 取消收藏
            // 没有收藏，添加收藏
            collectImage(img.id, !img.iscollected).then((res) => {
                console.log(res);
                // 关闭loading
                img.loading = false;
                // 更新视图状态
                img.is_collected = !img.is_collected;
            });
        },
        onDelete(img) {
            img.loading = true;
            deleteImage(img.id).then((res) => {
                img.loading = false;
                this.loadImages(this.page);
            });
        },
    },
};
</script>

<style scoped>
.action-btn {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
}
.image-item {
    position: relative;
}
.image-action {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    font-size: 25px;
    height: 40px;
    background-color: rgba(204, 204, 204, 0.5);
    position: absolute;
    bottom: 4px;
    left: 5px;
    right: 5px;
}
.selected{
    background: url(../selected.png) no-repeat;
    background-size: cover;
    position: absolute;
    left:0;
    right:0;
    bottom: 0;
    top:0;
    display: flex;
    justify-content: center;
    align-items: center;
}
</style>